import React from 'react';
import {Card, Table} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils';

export default class BasicTable extends React.Component{

    state={
        dataSource2 : [],
        loading: true,
        checkIds : []
    };

    params= {
        page :1
    };

    componentDidMount() {
        const dataSource = [
            {
                id: 1,
                userName:'Jack',
                sex:1,
                state:1,
                interest:'1',
                birthday:'2018-08-08',
                address:'绍兴市',
                time:'09:00'
            }
        ];
        this.setState({
            dataSource
        });
        this.request();
    }

    request = () => {
        let that = this;
        axios.Axios({
            url:'table/list',
            method: 'get',
            data: {
              params : {
                  page : this.params.page
              }
            },
            isShowLoading : 'true',
        }).then(res => {
            this.setState({
                dataSource2 : res.list,
                loading: false,
                pagination:Utils.pagination(res,(current) => {
                    that.params.page = current;
                    this.request()
                })
            })
        })
    };

    onRowClick = (record,index) => {
        let selectKey = [index+1];
        this.setState({
            selectedRowKeys:selectKey,
            selectedItem:record
        })
    };

    render() {
        const columns = [
            {
                title: 'id',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                key: 'sex',
                dataIndex: 'sex',
                render: t => t === 1 ? '男' : '女'
            },
            {
                title: '状态',
                key: 'state',
                dataIndex: 'state',
                render: t => {
                    let config ={
                        1 : '游泳',
                        2 : '篮球',
                        3 : '跑步'
                    };
                    return config[t]
                }
            },
            {
                title: '爱好',
                key: 'interest',
                dataIndex: 'interest',
                render: t => {
                    let config ={
                        1 : '游泳',
                        2 : '篮球',
                        3 : '跑步'
                    };
                    return config[t]
                }
            },
            {
                title: '生日',
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                dataIndex: 'time'
            },
        ];
        const {selectedRowKeys} = this.state;
        // 单选
        let rowSelection = {
            type:'radio',
            selectedRowKeys
        };
        // 复选
        let rowCheckSelection = {
            type:'checkbox',
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                let ids = [];
                selectedRows.map((item) => {
                    return ids.push(item.id)
                });
                this.setState({
                    selectedRowKeys,
                    checkIds:ids
                });
            }
        };
        return (
            <div className="wrap">
                <Card title="基础表格">
                    <Table
                        dataSource={this.state.dataSource}
                        columns={columns}
                        rowKey={record => record.id}
                    />
                </Card>
                <Card title="动态数据渲染表格" style={{marginTop:20}}>
                    <Table
                        dataSource={this.state.dataSource2}
                        columns={columns}
                        rowKey={record => record.id}
                        pagination={{
                            style: {marginBottom: 0},
                            pageSize: 5,
                        }}
                        loading={this.state.loading}
                    />
                </Card>
                <Card title="动态数据渲染表格 - 单选" style={{marginTop:20}}>
                    <Table
                        dataSource={this.state.dataSource2}
                        columns={columns}
                        rowKey={record => record.id}
                        pagination={{
                            style: {marginBottom: 0},
                            pageSize: 5,
                        }}
                        loading={this.state.loading}
                        rowSelection={rowSelection}
                        onRow={(record,index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record,index);
                                }
                            }
                        }}
                    />
                </Card>
                <Card title="动态数据渲染表格 - 多选" style={{marginTop:20}}>
                    <Table
                        dataSource={this.state.dataSource2}
                        columns={columns}
                        rowKey={record => record.id}
                        pagination={{
                            style: {marginBottom: 0},
                            pageSize: 5,
                        }}
                        loading={this.state.loading}
                        rowSelection={rowCheckSelection}
                    />
                </Card>
                <Card title="动态数据渲染表格 - 分页" style={{marginTop:20}}>
                    <Table
                        dataSource={this.state.dataSource2}
                        columns={columns}
                        rowKey={record => record.id}
                        pagination={this.state.pagination}
                        loading={this.state.loading}
                    />
                </Card>
            </div>
        )
    }
}
